<style lang="scss" scoped>
  .download {
    position: relative;
    background-color: #fff;
    overflow: hidden;
    img  {
      display: block;
    }
    .logo {
      margin: 4rem auto;
      width: 50%;
    }
    .btn-dl {
      display: block;
      margin: 4rem auto;
      padding: 1rem 2rem;
      font-size: 2rem;
    }
    .pic-1 {
      margin: 4rem auto;
      width: 90%;
    }
    .pic-2 {
      margin: 4rem auto;
      width: 70%;
    }
    .pic-3 {
      margin: 4rem auto;
      width: 85%;
    }
    h4 {
      margin: 1rem 0;
      padding: 0 2rem;
      font-size: 1.6rem;
      color: #ba2835;
      font-weight: bold;
      text-align: center;
    }
    .info {
      margin: 1rem 0;
      padding: 0 2rem;
      font-size: 1.4rem;
      color: #666;
    }
    .copyright {
      margin: 1rem 0;
      padding: 0 2rem;
      font-size: 1.4rem;
      color: #666;
      text-align: center;
    }
    .dl-tip {
      position: absolute;
      width: 100%;
      background-color: rgba(0,0,0,0.6);
      color: #ffffff;
      font-size: 1.4rem;
      text-align: center;
      padding: 0.8rem;
      button {
        color: #fff;
        float: right;
        border: 0;
        background: 0;
      }
    }
  }
</style>
<template>
  <div class="download">
    <div class="dl-tip" v-if="isShow">如果无法下载请用自带浏览器打开
    <button type="button" @click="isShow = false">x</button></div>
    <img class="logo" src="../../static/img/dl-logo.png" alt="">
    <button type="button" @click="onClick" class="btn-dl btn">立即下载体验</button>
    <img class="pic-1" src="../../static/img/dl-pic-1.png" alt="">
    <h4>会员世界你不懂！我懂！</h4>
    <p class="info">你想要的各种会员这里应有尽有还便宜，你还可以把自己的各种东西在小树林平台出租来赚钱！</p>
    <img class="pic-2" src="../../static/img/dl-pic-2.png" alt="">
    <h4>电视、网站、直播、小树林一个就够！</h4>
    <p class="info">湖南卫视、浙江卫视、央视频道、斗鱼直播、YY直播、虎牙直播等直播同步平台的聚集地，同一个时空-同步爱</p>
    <img class="pic-3" src="../../static/img/dl-pic-3.png" alt="">
    <button type="button" @click="onClick" class="btn-dl btn">立即下载体验</button>
    <p class="copyright">视频伴侣版权所有©2016-2066</p>
  </div>
</template>
<script>
  import userAgent from '../assets/utils/userAgent.js'
  export default {
    name: 'Download',
    data () {
      return {
        osType: '',
        isShow: false
      }
    },
    methods: {
      onClick () {
        if (this.osType === 'ios') {
          window.location.href = 'https://itunes.apple.com/us/app/zhang-hao-ban-lu/id992488773?l=zh&ls=1&mt=8'
        } else if (this.osType === 'android') {
          window.location.href = 'http://www.vipbanlv.com/apk/vipbanlv.apk'
        }
      }
    },
    created () {
      this.osType = userAgent.getOS()
      if (this.osType === 'android') {
        this.isShow = true
      }
    }
  }
</script>
